<template>
  <div class="home">
    <!-- 顶部 用户信息-->
    <el-row>
      <el-col :span="17" style="margin-right: 6px">
        <!-- 显示用户信息,头像，名称，职位 -->
        <el-card>
          <el-row>
            <el-col :span="2">
              <el-avatar :size="100" :src="avatar"></el-avatar
            ></el-col>
            <el-col :span="18">
              <el-row
                ><strong>{{ name }}</strong></el-row
              >
              <el-row style="margin-top: 20px"
                ><strong>职位：</strong
                ><span
                  v-for="(role, key) in roles"
                  :key="key"
                  style="margin-left: 4px"
                  ><el-tag effect="dark">{{ role }}</el-tag>
                </span></el-row
              >
            </el-col>
          </el-row>
        </el-card>

        <!-- 显示当天订单信息 -->
        <el-card>
          <span>订单信息</span>

          <el-row>
            <el-col :span="3" style="margin: 20px 20px 20px 100px">
              <el-card
                >今天待发货
                <div style="margin-top: 16px">
                  <strong>{{ dashborderData.withSendOfJingTian }}</strong>
                </div></el-card
              ></el-col
            >
            <el-col :span="3" style="margin: 20px">
              <el-card
                >明天待发货
                <div style="margin-top: 16px">
                  <strong>{{ dashborderData.withSendOfMinTian }}</strong>
                </div>
              </el-card></el-col
            >
            <el-col :span="3" style="margin: 20px">
              <el-card
                >后天待发货
                <div style="margin-top: 16px">
                  <strong>{{ dashborderData.withSendOfHouTian }}</strong>
                </div>
              </el-card></el-col
            >
            <el-col :span="3" style="margin: 20px">
              <el-card
                >今天预计收货量
                <div style="margin-top: 16px">
                  <strong>{{ dashborderData.withSendBackOfJinTian }}</strong>
                </div>
              </el-card></el-col
            >
            <el-col :span="3" style="margin: 20px">
              <el-card
                >明天预计收货量
                <div style="margin-top: 16px">
                  <strong>{{ dashborderData.withSendBackOfMinTian }}</strong>
                </div>
              </el-card></el-col
            >
          </el-row>
        </el-card>

        <!-- 显示收货信息 -->

        <!-- 显示历史订单信息 -->
        <el-card>
          <span>历史订单信息</span>
          <el-row>
            <el-col :span="3" style="margin: 20px 20px 20px 100px">
              <el-card
                >已发货
                <div style="margin-top: 16px">
                  <strong>{{ dashborderData.yiFaHuoNum }}</strong>
                </div>
              </el-card></el-col
            >

            <el-col :span="3" style="margin: 20px">
              <el-card
                >已逾期
                <div style="margin-top: 16px">
                  <strong>{{ dashborderData.yiYuQiNum }}</strong>
                </div>
              </el-card></el-col
            >
            <el-col :span="3" style="margin: 20px">
              <el-card
                >完结
                <div style="margin-top: 16px">
                  <strong>{{ dashborderData.YiWanJieNum }}</strong>
                </div>
              </el-card></el-col
            >
            <el-col :span="3" style="margin: 20px">
              <el-card
                >完结租金
                <div style="margin-top: 16px">
                  <strong>{{ dashborderData.WanJieMoney }}</strong
                  >元
                </div>
              </el-card></el-col
            >
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="height: 556px">
          <!-- 显示公告 -->
          <div>
            <div align="right">
              <el-button type="text" @click="openNoticeUi">发布公告</el-button>
            </div>
          </div>
          <el-table :data="noticeList" style="width: 100%" height="500px">
            <el-table-column label="公告">
              <template slot-scope="notice">
                <el-card>
                  <!--  -->
                  <div align="right">
                    <el-button
                      type="text"
                      icon="el-icon-close"
                      circle
                      size="mini"
                      @click="deleteNotice(notice.row.id)"
                    ></el-button>
                  </div>
                  <h3>{{ notice.row.title }}</h3>
                  <p>{{ notice.row.content }}</p>
                  <div style="font-size: 12px">
                    {{ notice.row.operator }}
                    {{ notice.row.createTime.split(" ")[0] }}
                  </div>
                </el-card>
              </template>
            </el-table-column>
          </el-table>

          <div v-for="(notice, key) in noticeList" :key="key"></div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 底部 -->
    <el-row>
      <el-col :span="24"><el-card style="height: 600px"></el-card></el-col>
    </el-row>
    <!-- 发布公告对话框 -->
    <el-dialog
      title="发布公告"
      :visible.sync="dialogFormVisibleNotice"
      width="600px"
      @close="clearNoticeForm"
    >
      <el-form :model="noticeForm" :rules="rules" ref="noticeRef">
        <el-form-item
          label="公告标题"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input
            v-model="noticeForm.title"
            autocomplete="off"
            style="width: 460px"
            placeholder="标题"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="content"
          label="公告内容"
          :label-width="formLabelWidth"
        >
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="noticeForm.content"
            autocomplete="off"
            style="width: 460px"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleNotice = false">取 消</el-button>
        <el-button type="primary" @click="saveNotice">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import userApi from "@/api/userManage";
import orderApi from "@/api/order";
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth"; // get token from cookie
import noticeApi from "@/api/notice";

export default {
  data() {
    return {
      dashborderData: {},

      dialogFormVisibleNotice: false,

      noticeForm: {},

      formLabelWidth: "80px",

      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 32 个字符",
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "请输入内容", trigger: "blur" },
          {
            min: 1,
            max: 255,
            message: "长度在 1 到 255 个字符",
            trigger: "blur",
          },
        ],
      },

      noticeList: [],
    };
  },
  mounted() {},
  computed: {
    ...mapGetters(["name", "avatar", "roles"]),
  },
  methods: {
    clearNoticeForm() {
      this.noticeForm = {};

      this.$refs.noticeRef.clearValidate();
    },

    getUserInfo() {
      const hasToken = getToken();
      userApi.getInfo(hasToken).then((response) => {
        // console.log(response);
      });
      return hasToken;
    },

    getDashboardData() {
      orderApi.dashboardData().then((response) => {
        this.dashborderData = response.data;
      });
    },

    openNoticeUi() {
      this.dialogFormVisibleNotice = true;
    },

    getAllNotice() {
      noticeApi.getNotices().then((response) => {
        this.noticeList = response.data;
      });
    },

    saveNotice() {
      this.$refs.noticeRef.validate((valid) => {
        if (valid) {
          console.log(this.noticeForm);
          noticeApi.addNotice(this.noticeForm).then((response) => {
            this.$message.success(response.message);

            this.getAllNotice();
            this.dialogFormVisibleNotice = false;
          });
        } else {
          return false;
        }
      });
    },

    deleteNotice(id) {
      this.$confirm("你确定删除这条公告吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        noticeApi.deleteNotice(id).then((response) => {
          this.$message.info(response.message);
          // 刷新列表
          this.getAllNotice();
        });
      });
    },
  },

  created() {
    this.getDashboardData();

    this.getUserInfo();

    this.getAllNotice();
  },
};
</script>

<style scoped></style>
